<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <ui:define name="title">Registrate con nosotros! | Subway El Salvador</ui:define>
    </h:head>

    <h:body>
        <ui:composition template="./WEB-INF/template.xhtml">
            <ui:define name="title">
                <h:outputText value="Registrate con nosotros | Subway El Salvador!" />
            </ui:define>
            <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"></h:messages>
            <ui:define name="content">
                <f:view>
                    <div id="content_inner">

                        <div class="content">
                            <div id="content_registro">

                                <div id="newuser"><h1>Nuevo usuario</h1>
                                    <p>Bienvenido a Subway El Salvador! Use el siguiente formulario para 
                                        crear una nueva cuenta y poder accesar a nuestro servicio de 
                                        pedidos en línea y gozar de muchos más privilegios.</p>
                                </div><!-- end of newuser -->
                                <div id="new-form">
                                    <h3>Recuperar contraseña.</h3>
                                    <p>Ya eres usuario de Subway pero se te ha olvidado la contraseña? ¡No te preocupes!
                                        Solamente ingresa tu correo electrónico y nosotros nos encargaremos de enviarteá
                                        las instrucciones para resetear tu contraseña.</p>
                                    <div id="passrecov">
                                        <form action="" method="POST" name="passrecov">
                                            <h:panelGrid columns="2">
                                                <h:outputText value="Correo electrónico: "/>
                                                <input type="text" style="width: 6cm" title="Correo electrónico" maxlength="100" required="true"/>
                                                <h:outputText value=""/>
                                                <button type="submit" value="" action="passwordrecov.xhtml">Reestablecer mi contraseña!</button>
                                            </h:panelGrid>
                                        </form>
                                    </div><!-- end of passrecov -->
                                    <h3>Crear una nueva cuenta</h3>
                                    <div id="registro">
                                        <form action="" method="POST" name="passrecov">
                                            <div style="height: 55px"></div>
                                            <h:panelGrid columns="2">
                                                <h:outputText value="Usuario"/>
                                                <input type="text" title="Usuario" size="32" maxlength="50" required="true"/>
                                                <font color="red" style="font-size: 22px">*</font>
                                                <h:outputText value="Correo"/>
                                                <input type="text" title="Correo electrónico" size="32" maxlength="100" required="true"/>
                                                <font color="red" style="font-size: 22px">*</font>
                                                <h:outputText value="Nombres"/>
                                                <input type="text" title="Nombres" size="32" maxlength="100" required="true"/>
                                                <font color="red" style="font-size: 22px">*</font>
                                                <h:outputText value="Apellidos"/>
                                                <input type="text" title="Apellidos" size="32" maxlength="100" required="true"/>
                                                <font color="red" style="font-size: 22px">*</font>
                                                <h:outputText value="Teléfono"/>
                                                <input type="number" title="Teléfono" size="32" maxlength="100" required="true"/>
                                                <font color="red" style="font-size: 22px">*</font>
                                                <h:outputText value="Dirección"/>
                                                <input type="text" title="Dirección" size="32" maxlength="100" required="true"/>
                                                <font color="red" style="font-size: 22px">*</font>
                                                <h:outputText value="Contraseña"/>
                                                <input type="password" title="Contraseña" size="32" maxlength="100" required="true"/>
                                                <font color="red" style="font-size: 22px">*</font>
                                                <h:outputText value="Contraseña (de nuevo)"/>
                                                <input type="password" title="Ingresa de nuevo tu contraseña" size="32" maxlength="100" required="true"/>
                                                <font color="red" style="font-size: 22px">*</font>
                                                <!-- captcha -->
                                                <h:outputText value="(5 + 3) x 2 = ?"/>
                                                <input type="text" title="Debes ingresar la respuesta aquí" size="32" maxlength="100" required="true"/>
                                                <font color="red" style="font-size: 22px">*</font>
                                                <!-- finaliza captcha -->
                                                <h:outputText value=""/>
                                                <font color="red" style="font-size: 22px; margin-left: 70px">*</font>
                                                <font color="red" style="font-size: 12px">(Campos requeridos)</font>
                                            </h:panelGrid>
                                            <div id="terminos">
                                                <input class="checkbox-term" type="checkbox" name="agree" value="1" required="true" />
                                                Estoy de acuerdo en que he creado una cuenta para hacer un adecuado uso del sitio 
                                                web y no hacer SPAM. También declaro haber leído los <a href="#">Términos de uso</a> 
                                                y la <a href="#">Política de privacidad</a>.<font color="red">*</font>
                                                <p><input class="boton-term" type="submit" name="submit" value="Crear cuenta!" /></p>
                                            </div>
                                        </form>
                                    </div><!-- end of registro -->
                                </div><!-- end of new-form -->
                            </div>
                        </div><!-- end of content -->
                    </div><!-- end of content_inner -->
                </f:view>

            </ui:define>
        </ui:composition>

    </h:body>
</html>
